<template>
  <div>
    <Pane class="goods-cate">
      <div slot="title">
        <el-row>
          <el-col :span="12">
            <span>商品分类</span>
          </el-col>
          <el-col :span="12">
            <el-button type="primary" @click="saveGoodsCate" style="float:right;">添加分类</el-button>
          </el-col>
        </el-row>
      </div>
      <section slot="content">
        <el-table :data="goodsCateData" style="width: 100%">
          <el-table-column prop="id" label="序号" width="180"></el-table-column>
          <el-table-column prop="cateName" label="分类名称" width="180"></el-table-column>
          <el-table-column prop="state" label="是否启用">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
                @change="stateChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="editGoosCate(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="delGoosCate(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[4, 6]"
          :page-size="4"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>

        <!-- 弹框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
          <el-form :model="cateform">
            <el-form-item label="分类名称" :label-width="formLabelWidth">
              <el-input v-model="cateform.cateName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否启用" :label-width="formLabelWidth">
              <el-switch
                v-model="cateform.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleClick">确 定</el-button>
          </div>
        </el-dialog>
      </section>
    </Pane>
  </div>
</template>

<script>
import Pane from '@/components/Pane/Pane.vue'
import { getGoodsCates, addGoodsCates, updateGoodsCates, delGoodsCates } from '@/api/goods.js'
export default {
  name: 'GoodsCate',
  props: {},
  data() {
    return {
      goodsCateData: [],
      currentPage: 1,
      pageSize: 4,
      total: 0,
      // 弹框显示
      dialogFormVisible: false,
      cateform: {
        cateName: '',
        state: '1'
      },
      formLabelWidth: '200px',
      title: ''
    }
  },
  methods: {
    async init() {
      const { total, data } = await getGoodsCates({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
      this.total = total
      this.goodsCateData = data
      this.goodsCateData.forEach(v => {
        v.state = v.state.toString()
      })
      // console.log(this.goodsCateData)
    },
    // 编辑分类
    editGoosCate(row) {
      this.dialogFormVisible = true
      this.title = '修改分类'
      this.cateform = row
      // console.log(this.cateform)
    },
    async delGoosCate(id) {
      await delGoodsCates({ id: id })
      this.init()
    },
    // 添加分类
    saveGoodsCate() {
      this.dialogFormVisible = true
      this.title = '添加分类'
      this.cateform = {
        cateName: '',
        state: '1'
      }
    },
    // switch值发生变化
    async stateChange(row) {
      console.log(row)
      if (row.state === '1') {
        row.state = true
      } else {
        row.state = false
      }
      await updateGoodsCates(row)
      // console.log(code, msg)
      this.init()
    },
    // 分页功能
    handleSizeChange(val) {
      this.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.init()
    },
    async handleClick() {
      this.dialogFormVisible = false
      // 根据title不同发送不同请求，进行修改、添加分类
      // console.log(this.cateform)
      if (this.title === '添加分类') {
        if (this.cateform.state === '1') {
          this.cateform.state = true
        } else {
          this.cateform.state = false
        }
        const { code, msg } = await addGoodsCates(this.cateform)
        if (code === 0) {
          this.$message.success(msg)
        }
        // console.log(this.cateform)
        // console.log(res)
      } else {
        // 修改分类
        if (this.cateform.state === '1') {
          this.cateform.state = true
        } else {
          this.cateform.state = false
        }
        await updateGoodsCates(this.cateform)
        // console.log(code, msg)
        this.init()
      }
    }
  },
  components: {
    Pane
  },
  created() {
    this.init()
  }
}
</script>

<style scoped >
</style>
